div {
    max-width: 30em;
    min-height: 5em;
    padding: 2em;
    margin: 2em;
}

.div1 {
    background: #fff;
    background-image: linear-gradient(rgba(34, 34, 170, .5) 50%, transparent 0), linear-gradient(90deg, #97a 50%, transparent 0);
    background-size: 30px 30px;
}

.div2 {
    background: #38a;
    background-image: linear-gradient(#fff 1px, transparent 0), linear-gradient(90deg, #fff 1px, transparent 0), linear-gradient( #fff 2px, transparent 0), linear-gradient(90deg, #fff 2px, transparent 0);
    background-size: 100% 15px, 15px 100%, 100% 45px, 45px 100%;
}

.div3 {
    background: #95a;
    background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient( #fff 20%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.div4 {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, 
    transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0), 
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%,
     transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}